<template>
	<view class="boxes" :style="{ '--color': color }">
		<loading-view :loading="!pageData" rows="2" marginTop="20" :rowsWidth="['50%', '100%']" :rowsHeight="[24, 100]">
			<view class="deliveryBox">
				<view class="tabWay" v-if="deliverysArr.length > 1">
					<view class="Tabs" :class="{
							subint: index == selectedIndex - 1,
							addint: index == selectedIndex + 1,
							Active: index == selectedIndex
						}" @click="selectTab(index, item)" v-for="(item, index) in deliverysArr" :key="index">
						<view class="TabItem">{{ getDeliveryName(item) }}</view>
					</view>
				</view>
				<view class="WayToggle" v-if="delivery == 1 || delivery == 3">
					<view class="expressage" @click="Show">
						<block v-if="Address.Aaddress">
							<view class="Info">
								<view class="downtown" v-if="Address.Aregion">
									<text class="downtown_txt">{{ Address.Aregion }}</text>
									<view class="downtown_More">默认</view>
								</view>
								<text class="address">{{ Address.Aaddress }}</text>
								<view class="contact">
									<text class="contact_Name">{{ Address.Aname }}</text>
									<text class="contact_Tel">{{ Address.Amobile || Address.uTel }}</text>
								</view>
							</view>
							<text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
						</block>

						<view class="initAddress" v-else>
							<view class="iconfont icon-tianjia"></view>
							<text class="color_99 size28 m-top20">添加地址</text>
						</view>
					</view>
				</view>

				<view class="Store" v-if="delivery == 2 && Store">
					<view class="Content" @click.stop="storeShow = true">
						<view class="StoreBox">
							<view class="StoreBox_name">
								<view class="iconfont icon-store size36 m-right20 m-left4"></view>
								<text class="Store_name">{{ Store.name }}</text>
							</view>
							<view class="StoreBox_address">
								<view class="iconfont icon-B size38 m-right20 m-left4"></view>
								<text class="Store_address">{{ Store.address }}</text>
							</view>
						</view>
						<view class="iconfont icon-xiangyouxiayiye color_99 size26"></view>
					</view>
					<view class="Place_info">
						<text class="info_title">姓名：</text>
						<input type="text" :value="buy_name" @input="buy_Name" class="info_input"
							placeholder="请输入购买人姓名" />
					</view>
					<view class="Place_info">
						<text class="info_title">电话：</text>
						<input type="number" :value="buy_phone" @input="buy_Phone" maxlength="11" class="info_input"
							placeholder="请输入购买人电话" />
					</view>
				</view>

				<view class="Warehouse" v-if="delivery == 5">
					<view class="houseTxt">{{ pageData.toWarehouseContent }}</view>
				</view>
			</view>
		</loading-view>

		<Address :Address="Address" v-if="showAddress" @close="showAddress = false" @Update="getOldAddress"></Address>

		<u-popup :show="storeShow" @close="storeShow = false" mode="bottom" :round="10" closeable>
			<view class="storeWrapper">
				<view class="head">选择门店</view>
				<view class="content" v-if="pickUpStore.length">
					<view class="storeList" v-for="(item, index) in pickUpStore" :key="item.shop_id"
						@click.stop="selectStore(item)">
						<view class="Info">
							<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Logo" v-if="item.logo"></image>
							<view class="Info_txt">
								<view class="row a-center">
									<text class="Info_name ellipsis">{{ item.name }}</text>
									<text class="color_99 size26 m-left10"
										v-if="item.distance">{{ $pop.formatDistance(item.distance) }}</text>
								</view>

								<text class="Info_address ellipsis">{{ item.address }}</text>
							</view>
						</view>
						<view class="cou_Rigth" :class="{ Active: item.shop_id == Store.shop_id }">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Address from './Address.vue';
	import LoadingView from './LoadingView.vue';
	export default {
		props: ['pageData', 'delivery', 'car_id', 'goods_id', 'specs'],
		components: {
			Address,
			LoadingView
		},
		data() {
			return {
				buy_name: '',
				buy_phone: '',
				Address: '',
				showAddress: false,
				deliverysArr: [],
				selectedIndex: 0,
				storeShow: false,
				pickUpStore: [],
				Store: ''
			};
		},
		created() {
			let shop_id = uni.getStorageSync('shop_id');
			this.updateShopId(shop_id);
		},

		methods: {
			...mapMutations(['updateShopId', 'updateOrderstatus']),

			getOldAddress() {
				this.$http
					.get({
						url: '/SRA_simMallApi/getOldAddress',
						data: {
							type: 3,
							delivery: this.delivery,
							shop_id: uni.getStorageSync('shop_id') || '',
							goods_id: this.goods_id,
							car_id: this.car_id,
							specs_bind_id: this.specs.specs_bind_id ?? '',
						}
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.msg);
						const result = res.data;
						this.Address = result;
						this.buy_name = result.uName || '';
						this.buy_phone = result.uTel || '';
						this.$emit('Usesite', result);
						this.$emit('buy_name', result.uName);
						this.$emit('buy_phone', result.uTel);
						if (!result.operate) return;
						const operate = result.operate;

						if (operate.needOperate == 1) {

							this.updateOrderstatus(false);
							this.$Modals('提示', operate.needOperateText, operate.button1Text ? operate.button1Text :
								'取消', operate.button2Text ? operate.button2Text : '更换地址').then((isflag) => {
								if (isflag) {
									this.showAddress = true;
								} else {
									if (operate.needOperateShopId) return this.$emit('Updateproduct', operate)
								}
								return;
							});
						} else if (operate.needOperate == 2 && operate.needOperateShopId) {
							uni.setStorageSync('shop_id', operate.needOperateShopId);
							this.$emit('Use_tabWay', this.delivery);
						} else if (this.pageData.allowBuy == 0) {
							this.updateOrderstatus(false);
						} else {

							this.updateOrderstatus(true)
						}

					});
			},

			Show() {
				this.showAddress = true;
			},
			buy_Name(event) {
				const newVal = event.target.value;
				this.$emit('buy_name', newVal);
			},
			buy_Phone(event) {
				const newVal = event.target.value;
				this.$emit('buy_phone', newVal);
			},

			getDeliveryName(Val) {
				const num = +Val;
				const wayMap = {
					1: this.pageData.toExpressTitle || '快递上门',
					2: this.pageData.toStoreTitle || '门店自提',
					3: this.pageData.toIntraCityServiceTitle || '外卖',
					5: this.pageData.toWarehouseTitle || '暂存仓库'
				};
				return wayMap[num] || '';
			},
			selectTab(index, item) {
				uni.setStorageSync('shop_id', this.ordersShop_id);
				if (this.selectedIndex == index) return;
				this.selectedIndex = index;
				this.$emit('Use_tabWay', item);
			},
			selectStore(Item) {
				uni.setStorageSync('shop_id', Item.shop_id);
				this.$emit('Use_tabWay', 2);
				this.storeShow = false;
			},
			getStore(pickUpStore) {
				const Item = pickUpStore.find((n) => n.selected == 1);
				if (Item) return (this.Store = Item);
				if (this.delivery == 2) this.selectStore(pickUpStore[0]);
			}
		},
		computed: {
			...mapState(['color', 'ordersShop_id'])
		},
		watch: {
			pageData: {
				immediate: true,
				handler(newVal) {
					if (!newVal) return;
					const deliverysValue = newVal.deliverys;
					const deliverysArray = deliverysValue.includes(',') ? deliverysValue.split(',') : [deliverysValue];
					const Flag = deliverysArray.includes(this.delivery);
					if (!Flag && !this.deliverysArr.length) this.$emit('Use_tabWay', deliverysArray[0]);
					if (!this.deliverysArr.length) this.deliverysArr = deliverysArray;

					// if (this.deliverysArr.length <= 1) return;
					const findIndex = this.deliverysArr.findIndex((item) => item == this.delivery);
					this.selectedIndex = findIndex;
					if (newVal.pickUpStore && newVal.pickUpStore.list) {
						this.pickUpStore = newVal.pickUpStore.list;
						this.getStore(newVal.pickUpStore.list);
					}
					this.getOldAddress();
				}
			},
			// delivery: {
			// 	immediate: true,
			// 	handler(newVal) {
			// 		if (!newVal) return;
			// 		this.getOldAddress();

			// 	}
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.boxes {
		width: 710rpx;
		margin: 0 auto;
	}

	@mixin wrapper {
		width: 100%;
		padding: 24rpx;
		background-color: #ffffff;
	}

	@mixin flexCenter {
		display: flex;
		align-items: center;
	}

	.deliveryBox {
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 30rpx auto 0;

		.tabWay {
			width: 100%;
			display: flex;
			align-items: flex-end;
			position: relative;

			.Tabs {
				flex: 1;

				position: relative;
				z-index: 10;
				overflow: hidden;

				.TabItem {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #000;
					height: 70rpx;
					background-color: rgba(249, 243, 232, 0.5);
					// background-color: #f9f3e8;
				}
			}

			.Active {
				border-radius: 20rpx;
				font-weight: bold;

				.TabItem {
					font-size: 32rpx;
					height: 90rpx;
					background-color: #ffffff;
				}
			}

			.subint {
				border-radius: 0 0 20rpx 0;
			}

			.addint {
				border-radius: 0 0 0 20rpx;
			}
		}

		.tabWay::before {
			content: '';
			background-color: #ffffff;
			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.WayToggle {
		@include wrapper;

		.expressage {
			display: flex;
			align-items: center;

			.Info {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-right: 20rpx;

				.downtown {
					display: flex;
					align-items: center;

					&_txt {
						color: #333;
						font-size: 28rpx;
					}

					&_More {
						background-color: var(--color);
						color: #ffffff;
						font-size: 20rpx;
						padding: 0 10rpx;
						border-radius: 20rpx;
						margin-left: 10rpx;
					}
				}

				.address {
					color: #000;
					font-size: 34rpx;
					margin-top: 14rpx;
					font-weight: bold;
				}

				.contact {
					display: flex;
					align-items: center;
					margin-top: 14rpx;

					&_Name {
						color: #333;
						font-size: 28rpx;
						margin-right: 24rpx;
					}

					&_Tel {
						color: #333;
						font-size: 28rpx;
					}
				}
			}

			.initAddress {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 10rpx 0;

				.icon-tianjia {
					color: #999;
					font-size: 68rpx;
				}
			}
		}
	}

	.Store {
		@include wrapper;

		.Content {
			width: 100%;
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
			padding-bottom: 24rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;

			.StoreBox {
				flex: 1;
				display: flex;
				flex-direction: column;

				.StoreBox_name {
					@include flexCenter;

					.shopLogo {
						width: 36rpx;
						height: 36rpx;
						border-radius: 6rpx;
						margin-right: 14rpx;
					}

					.Store_name {
						color: #000;
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.StoreBox_address {
					display: flex;
					padding-top: 20rpx;

					.Store_address {
						color: #333;
						font-size: 30rpx;
					}
				}
			}
		}

		.Place_info {
			width: 100%;
			display: flex;
			align-items: center;

			.info_title {
				color: #333;
				font-size: 30rpx;
			}

			.info_input {
				flex: 1;
				height: 70rpx;
				padding-left: 10rpx;
				color: #333;
				font-size: 30rpx;
				font-weight: normal;
			}
		}
	}

	.Warehouse {
		@include wrapper;

		.houseTxt {
			width: 100%;
			min-height: 200rpx;
			color: #333;
			font-size: 30rpx;
		}
	}

	.storeWrapper {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background-color: #f7f8fa;

		.head {
			width: 100%;
			background-color: #ffffff;
			padding: 30rpx 0 30rpx;
			display: flex;
			justify-content: center;
			color: #000;
			font-size: 34rpx;
			border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
		}

		.content {
			width: 100%;
			min-height: 400rpx;
			padding: 0 24rpx 24rpx;
			overflow-y: scroll;

			.storeList {
				width: 100%;
				background-color: #ffffff;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				.Info {
					flex: 1;
					display: flex;
					align-items: center;

					.Logo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
						margin-right: 24rpx;
					}

					.Info_txt {
						height: 100rpx;
						display: flex;
						flex-direction: column;
						flex: 1;
						justify-content: space-between;

						.Info_name {
							flex: 1;
							color: #000;
							font-size: 34rpx;
						}

						.Info_address {
							color: #999;
							font-size: 28rpx;
						}
					}
				}

				.cou_Rigth {
					width: 34rpx;
					height: 34rpx;
					border: 1px solid #ccc;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
					margin-left: 24rpx;
				}

				.Active {
					background-color: var(--color) !important;
					border: 1px solid var(--color) !important;
				}
			}
		}
	}
</style>